import React, { useState,useEffect,useRef, forwardRef, useImperativeHandle } from 'react';
import GenericTable from '../components/tables/GenericTable';
import { Tag,Switch } from 'antd';
import axios from 'axios';
import '../css/lzk.css';
import dayjs from 'dayjs';
axios.defaults.baseURL = 'http://localhost:3000/'
// 定义表格列配置
const columns = [
    {
        width:'6.4rem',
        align:'center',
        title: '内容',
        key: '_id',
        render: (_, record) => (
              <a href="#" className="image-text-link">
                    <img src={record.imgs[0]} style={{width:'70px',height:'60px',marginTop:'0.1rem',borderRadius:'0.3rem'}} alt="" />
                    <span>{record.content}</span>
                </a>
        )
    },
    {
        align:'center',
        title: '话题',
        dataIndex: 'hua',
        key: '_id'
    },
    {
        align:'center',
        title: '点赞',
        dataIndex: 'zan',
        key: '_id'
    },
    {
        align:'center',
        title: '收藏',
        key: '_id',
        dataIndex: 'shou',
        // render: (_, { tags }) => (
        //     <>
        //         {tags.map((tag) => {
        //             let color = tag.length > 5 ? 'geekblue' : 'green';
        //             if (tag === 'loser') {
        //                 color = 'volcano';
        //             }
        //             return (
        //                 <Tag color={color} key={tag}>
        //                     {tag.toUpperCase()}
        //                 </Tag>
        //             );
        //         })}
        //     </>
        // )
    },
    {
        align:'center',
        title: '分享',
        key: '_id',
        dataIndex: 'fen',
    },
    {
        align:'center',
        title: '评论',
        key: '_id',
        dataIndex: 'ping',
        render:(text)=>(
            <a>{text}</a>
        )
    },
    {
        align:'center',
        title: '发布人',
        key: '_id',
        render:(_, record)=>(
            <a className='image-text-link'>
                    <img src={record.img} style={{width:'50px',height:'50px',borderRadius:'1rem'}} alt="" />
                    <div>
                        <span>{record.name}</span><br></br>
                        <span>{record.phone}</span>
                    </div>
                
            </a>
        )
    },
    {
        width:'3rem',
        align:'center',
        title: '发布时间',
        key: '_id',
        render: (_, record)=>(
            dayjs(record.start_time).format('YYYY-MM-DD HH:mm:ss')
        )
    },
    {
        align:'center',
        title: '状态',
        key: '_id',
        dataIndex: 'status',
        render:(_, record)=>(
            <Switch checkedChildren="显示" unCheckedChildren="隐藏" checked={record.status} />
        )
    },
    {
        align:'center',
        title: '操作',
        render: (_, record) => (
            <span>
                <a onClick={() => handleDelete(record._id)} style={{ marginLeft: 16 }}>
                    删除
                </a>
            </span>
        )
    },

];

// 定义表格数据源
// const dataSource = [
//     {
//         key: '1',
//         name: 'John Brown',
//         age: 32,
//         address: 'New York No. 1 Lake Park',
//         tags: ['nice', 'developer']
//     },
//     {
//         key: '2',
//         name: 'Jim Green',
//         age: 42,
//         address: 'London No. 1 Lake Park',
//         tags: ['loser']
//     },
//     {
//         key: '3',
//         name: 'Joe Black',
//         age: 32,
//         address: 'Sydney No. 1 Lake Park',
//         tags: ['cool', 'teacher']
//     },
//     {
//         key: '4',
//         name: 'Eve White',
//         age: 28,
//         address: 'Tokyo No. 1 Lake Park',
//         tags: ['smart', 'designer']
//     },
//     {
//         key: '5',
//         name: 'Mike Red',
//         age: 35,
//         address: 'Paris No. 1 Lake Park',
//         tags: ['fun', 'engineer']
//     }
// ];

// 处理邀请操作的函数
const handleInvite = (record) => {
    console.log(`Inviting ${record.name}`);
};

// 处理删除操作的函数
const handleDelete = async(id) => {
    await axios.get('/kai/deldynamic',{params: {id: id}})
};

const DataProvider = (props) => {
    
    return (
        <GenericTable
            columns={columns}
            dataSource={props.dynamicList}
            onInvite={handleInvite}
            onDelete={handleDelete}
        />
    );
};

export default DataProvider;